<template>
  <view class="tabBox" :style="fixedTop?'height:'+fixedHeight+'px':''">
	<view :class="{'fixed':fixedTop}" id="tab_container">
		<view class='search' v-if="searchBar" id="search_bar" :style="tabBarHeight==0?'padding: '+menuTop+'px '+menuLeft+'px 10px 10px':'padding: '+menuTop+'px '+menuLeft+'px 0 10px;'">
			<view v-if="backButton" class="center" style="width: 30px;" @click="doBack()"><uni-icons type="arrowleft" size="25" color='#333' style="margin-left: -5px;"></uni-icons></view>
			<!--#ifdef MP -->
			<uni-search-bar :radius="100" :placeholder="searchTips" v-model="query.search" @confirm="doSearch(query.search)" @cancel="doSearch()">
			</uni-search-bar>
			<!--#endif -->
			<!--#ifndef MP -->
			<uni-search-bar :radius="100" :placeholder="searchTips" v-model="query.search" @confirm="doSearch(query.search)" @cancel="doSearch()">
			</uni-search-bar>
			<!--#endif -->
			<view v-if="searchList && searchList.length>0" class="more" @click="openSearch()"><uni-icons type="tune" size="25" color='#666' style="margin-left: -5px;"></uni-icons></view>
		</view>
		<view id="tab_bar" class="tabBar" :class="{'tab-count-less':showCount>items.length}">
			<scroll-view v-if="showCount<items.length" scroll-x="true" class="scroll-view tabPane" style="width:90%;" :scroll-left='scorllLeft' scroll-with-animation >
				
				 <view v-for="(item,index) in items" :id="'tab-'+(index+1)"  :key="index" class="tabPaneview" @click="handleClick(index,item.value,$event)">
					<text class='tabPaneview-text' :class="{'active' :index == currentTab}">{{ item.name }}</text>
					<view class="tabPaneview-count" v-if="item.count && item.count!='0'">{{item.count}}</view>
				</view>
				<view class="tabPaneview" v-if="list.length==1" style="width: 60%;">
				</view>
				
			</scroll-view>
			<view v-else class="tabPane center">
				
				<view v-for="(item,index) in items" :id="'tab-'+(index+1)"  :key="index" class="tabPaneview" @click="handleClick(index,item.value,$event)">
					<text class='tabPaneview-text' :class="{'active' :index == currentTab}">{{ item.name }}</text>
					<view class="tabPaneview-count" v-if="item.count && item.count!='0'">{{item.count}}</view>
				</view>
				
			</view>
			<view class="more" @click="showAllTab = !showAllTab" v-if="showCount<items.length">
				<uni-icons type="bottom" size="22" color='#aaa' style="margin-left: -5px;"></uni-icons>
			</view>
			
		</view>
		<view v-if="items[currentTab] && items[currentTab].children && items[currentTab].children.length>0" class="tab-children">
			<p-button-group v-model="currentChild" :list="items[currentTab].children" :returnType="returnType" :propId="propId" :propName="propName" type="radio" buttonStyle="round" size="mini" @change="childTabChange"></p-button-group>
		</view>
		<view class="moreBox" v-show="showAllTab">
			<uni-transition ref="ani" mode-class="slide-top" :show="showAllTab">
				<view class="tagBox">
					<view class="tagTitle">更多：</view>
					<view class="tagBody">
						<p-button-group v-model="currentValue" :list="list" :returnType="returnType" :propId="propId" :propName="propName" column="3" type="radio" buttonStyle="gray" @change="tabChange"></p-button-group>
					</view>
				</view>
			</uni-transition>
			<uni-transition ref="animask" custom-class="mask" mode-class="fade" :show="showAllTab" @click="showAllTab = false">
				
			</uni-transition>
		</view>
	</view>
	<p-popup-sheet v-if="searchBar && searchList && searchList.length>0" ref="search_dialog" cancelTitle="取消" okTitle="确认" @confirm="doSearch()">
		<view>
			<view class="row-box row-form margin-top-15">
				
				<view class='textBlock' v-for="(item,index) in searchList" :id="'search-'+(index+1)"  :key="index" >
					<view class="blockTitle">{{item.title}}</view>
					<view class="blockBody" v-if="',checkbox,select,radio,'.indexOf(','+item.query_type+',')>=0">
						<p-button-group :column="item.column || 4" v-model="query[item.field]" type="item.query_type" :list="item.data" :propName="item.propName || 'name'" :propId="item.propId || 'id'" buttonStyle="gray"></p-button-group>
					</view>
					<view class="blockBody" v-else-if="',date,daterange,datetime,datetimerange,'.indexOf(','+item.query_type+',')>=0">
						<uni-datetime-picker returnType="timestamp" v-model="query[item.field]" type="daterange" rangeSeparator="至"/>
					</view>
					<view class="blockBody" v-else-if="',text,'.indexOf(','+item.query_type+',')>=0">
						<input class="border-input" v-model="query[item.field]" :placeholder="'请输入'+item.title"  placeholder-class="tips"/>
					</view>
				</view>
			</view>
	
		</view>
	</p-popup-sheet>
  </view>
</template>

<script>

export default {
  props: {
	value: {
		type: [String, Number,Array,Object],
		default: ''
	}, 
	child: {
		type: [String, Number,Array,Object],
		default: ''
	}, 
	searchList: {
	  type: Array,
	  default: () => {
	  	return []
	  }
	},
	list: {
	  type: [Array,Object],
	  default: () => {
	  	return []
	  }
	},
	showCount:{
		type:Number,
		default: 4,
	},
	returnType:{
		type:String,
		default: 'id',
	},
	fixed:{
		type:Boolean,
		default: false,
	},
	backButton:{
		type:Boolean,
		default: false,
	},
	searchBar:{
		type:Boolean,
		default: false,
	},
	searchTips:{
		type:String,
		default: () => {
			return '请输入搜索关键字'
		}
	},
	query: {
	  type: [Object],
	  default: () => {
	  	return {
			search:'',
		};
	  }
	},
	propId: {
		type: String,
		default: () => {
			return 'id'
		}
	},
	propName: {
		type: String,
		default: () => {
			return 'name'
		}
	},
	propCount: {
		type: String,
		default: () => {
			return 'count'
		}
	},
		
  },
  data() {
    return {
		scrollViewWidth:700,
		scorllLeft:0,
		hasNotchInScreen:false,
		showAllTab:false,
		scrollTop:false,
		statusBarHeight:0,
		searchBarHeight:0,
		tabBarHeight:0,
		menuLeft:10,
		menuTop:0,
		items:[],
		currentTab:0,
		currentValue:'',
		currentChild:'',
		fixedHeight:30,
	}
  },
  created(){
	// #ifdef APP-PLUS 
	this.hasNotchInScreen = plus.navigator.hasNotchInScreen;
	// #endif  	  
  },
  mounted() {
  		//初始化求出滚动的宽度
  	uni.createSelectorQuery().in(this).select('.scroll-view').boundingClientRect((rect)=>{
		if (rect && rect.width){
			this.scrollViewWidth = Math.round(rect.width);
		}
  		
  	}).exec();
	this.calcClientRect();
  },
  onPageScroll(e) {
  	if (e.scrollTop >= 85) {
  		this.scrollTop = true;
  	} else {
  		this.scrollTop = false;
  	}
  },
  computed:{
	 fixedTop(){
		return this.fixed;// && this.scrollTop
	 },
	 // fixedHeight(){
		//  return this.searchBarHeight+this.tabBarHeight;
	 // }
  },
  watch:{
  	// 监听下标的变化
  	value: {
  		handler(newVal) {
			this.currentValue  = newVal;
			
			if (this.returnType=='index'){
				this.currentTab = newVal;
			}else{
				for (var i = 0; i < this.items.length; i++) {
					if (this.returnType in this.items[i]){
						if (this.items[i][this.returnType]==this.currentValue){
							this.currentTab = i;
							break;
						}
					}
				}
			}

  		},
  		immediate: true
  	},
	child: {
		handler(newVal) {
			this.currentChild = newVal;
		},
		immediate: true
	},
  	list: {
  		handler(newVal) {
  			this.getList(newVal);
  		},
  		immediate: true
  	},
  },
  methods:{
	  getList(list){
	  	this.items = [];
	  	for (let i in list) {
	  		if (list[i]){
	  			let item ={isCheck:false,value:list[i].value?list[i].value:list[i],count:0,children:false};
	  			if (typeof(list[i])==='object') {
	  				item.id=list[i][this.propId];
	  				item.name=list[i][this.propName];
					item.count = this.propCount?list[i][this.propCount]:0
					item.children = list[i]['children']?list[i]['children']:[];
	  			}else{
	  				item.id=i;
	  				item.name = list[i];
					item.value ={id:i,name:list[i]};
					item.count = 0;
					item.children = false;
	  			 }
	  			this.items.push(item);
	  		}
	  	}
		
		
		//console.log(this.items);
		this.$nextTick(() => {
		  this.calcClientRect();
		});
		
	  },
	  calcClientRect(){
		  if (this.backButton){
			let that = this;
			uni.getSystemInfo({
				success:(res)=> {	
					that.statusBarHeight=res.statusBarHeight;
					that.menuTop = that.statusBarHeight;
					//#ifdef MP
					const menuRect = uni.getMenuButtonBoundingClientRect();
					that.menuLeft = menuRect.width + 20;
					that.menuTop = menuRect.top;
					//#endif
					
				}
			});
		  }
		  if (this.searchBar){
		  	uni.createSelectorQuery().in(this).select('#search_bar').boundingClientRect((rect)=>{
		  		if (rect && rect.height){
		  			this.searchBarHeight =Math.round(rect.height);
		  		}else{
		  			this.searchBarHeight = 40;
		  		}
	
		  		
		  	}).exec();
		  }
		  if (this.items.length>0){
		  	uni.createSelectorQuery().in(this).select('#tab_bar').boundingClientRect((rect)=>{
		  		if (rect && rect.height){
		  			this.tabBarHeight =Math.round(rect.height);
		  		}else{
		  			this.tabBarHeight = 40;
		  		}

		  	}).exec();
		  }
		  uni.createSelectorQuery().in(this).select('#tab_container').boundingClientRect((rect)=>{
		  	if (rect && rect.height){
		  		this.fixedHeight =Math.round(rect.height)-10;
		  	}else{
		  		this.searchBarHeight = this.searchBarHeight + this.tabBarHeight;
		  	}
		  }).exec();
		  
	  },
	  openSearch(){
		  this.$refs.search_dialog.open();
	  },
	  tabChange(index,value,item,event=false){
		  this.handleClick(index,item.value);
	  },
	  childTabChange(index,value,item,event=false){
		this.childClick(index,item.value);
	  },
	  switch(tab){
		let item;
		for (let index in this.items) {
			item=this.items[index];
			if (item.id==tab){
				this.handleClick(index,item.value);
				break;
			}
		}
	  		  
	  },
	  handleClick(index, item, e = false) {
	  	let that = this;
	  	this.showAllTab = false;
	  	uni.createSelectorQuery().in(this).select('#tab-'+(index+1)).boundingClientRect((rect)=>{
			if (rect && rect.width){
				let elWidth = rect.width/2;
				// 当前元素 距离屏幕的左边距离 减去 scroll-view的一半 +加元素的一般的宽度 
				that.scorllLeft = rect.left - (that.scrollViewWidth/2) + elWidth;
			}
	  	}).exec()
	  	//获取点击元素距离屏幕左边的距离
		//console.log(index);
		
		this.currentTab = index;
		
	  	this.currentValue = item[this.propId];
	  	this.$emit('input',this.returnType=='index'?index:this.currentValue);
		this.$emit('change',index,item);
		
	  },
	  childClick(index, item, e = false) {
		//this.$emit('input',this.currentValue);
	  	this.$emit('update:child',this.currentChild);
	  	this.$emit('change',index,item);

	  },
	  doBack(value){
		  this.$emit('back',value); 
	  },
	  doSearch(value=''){
		 this.$emit('search',value); 
	  }
  }
}
</script>

<style>
	
	.tabBox{
		position: relative;
		background-color: white;
		width: 100%;
	}
	.search{
		z-index:10;
		width: 100%;
		padding:0 10px;
		background-color: white;
		
	}
	.search uni-search-bar{
		width:100%;
	}
	.moreBox{
		position: absolute;
		width:100%;
		z-index: 9;
		height: 100vh;

	}
	.tagTitle{
		font-size: 16px;
		margin: 10px 0;
		font-weight: 600;
	}
	.tagBox{
		padding:15px;
		background-color: white;
	}
	.tagBody{
		display: flex;
		align-items: center;
		align-content: center;
		flex-wrap: wrap;
		padding-top: 5px;
		
	}
	.tabPane{
		justify-content: space-around;
	}
	.tab-count-less .tabPane{
		justify-content: flex-start;
	}
	.tab-children{
		padding:5px 7px;
		background-color: #fafafa;
	}
	.more{
		padding: 5px;margin-right: 10px;
	}
	.mask{
		background-color: rgba(0, 0, 0, 0.4);
		height:100%
	}

	.fixed {
		background-color: white;
		position: fixed;
		top: var(--window-top);	
		left: 0;
		right: 0;
		z-index:111;
		box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(0, 0, 0, 0.06);
	}
	.statusBar {
		padding-top: var(--status-bar-height);
		min-height: 20px;
	}
	
</style>
